<!DOCTYPE html>
<html>

<head>
  <title>InteractionBasic</title>
  <script src="d3.min.js"></script>
</head>

<body>
  <svg width="960" height="400" id="mainsvg" 
  class="svgs" style='display: block; margin: 0 auto;'>
      <rect id="my_rect" 
      x="10" y="200" width="200" height="30" 
      stroke="black" fill="#69b3a2" stroke-width="1"
      />
      <g>
        <path id="path1" d="M0 0 H 90 V 90 H 10 L 10 10" />
      </g>
      <g>
        <path id="path2" d="M10 110 H 90 V 190 H 10 Z" fill="green" stroke="black"/>
      </g>
      <g>
        <path id="path3" d="M10 270 H 90 V 350 H 10 Z" fill="yellow" stroke="black"/>
      </g>
  </svg>
  <script>
      const svg = d3.select('#mainsvg');
      svg.append('g').selectAll('text').data([{}]).join('text').attr('id', `number`)
      .attr('transform', d => `translate(500, 300)`).attr('text-anchor', 'middle');
      d3.select(`#path1`).on('click', (event, d) => {
        console.log("click");
        d3.select(event.currentTarget).attr('fill', d3.interpolateRainbow(Math.random()));
        name = "张锡康";
        window.open(`personal.html?name=${name}`);
      });
      d3.select(`#path2`).on('click', (event, d) => {
        console.log("click");
        d3.select(event.currentTarget).attr('fill', d3.interpolateRainbow(Math.random()));
        feature = "degree";
        window.open(`race.html?feature=${feature}`);
      });
      d3.select(`#path3`).on('click', (event, d) => {
        console.log("click");
        feature = "degree";
        window.open(`statistics.html?feature=${feature}`);
      });
          // 通信
          // var xhr = new XMLHttpRequest();
          // xhr.open('POST', 'http://127.0.0.1:5000/login', true);
          // xhr.setRequestHeader('Content-Type', 'application/json');  // 设置POST传参的请求头(JSON)
          // xhr.onreadystatechange = function () {
          //   if (xhr.readyState !== 4) return;  // readyState == 4 -> 已接收到全部响应数据
          //   if (xhr.status < 200 || xhr.status >= 300) return;  // 200 <= status <= 299 -> 请求成功
          //   console.log(xhr.responseText);
          //   svg.select("#number").text("From backend: " + xhr.responseText);  // [应用] 根据后端发来的信息改变图元
          //   // window.location.href="test.html";
          // }
          // xhr.send(JSON.stringify({username: event.currentTarget.id, password: 123456}));  // 发送请求, 这里设置POST请求的附加参数
  </script> 
</body>

</html>